<!-- Description -->
<div id="description" class="card">
    <div class="card-header">
        <h4 class="card-title">Description</h4>
    </div>
    <div class="card-content">
        <div class="card-body">
            <div class="card-text">
                <p>Default horizontal layout has a navigation dropdown arrow. To hide it use horizontal navigation without dropdown arrow option.</p>
                <div class="alert bg-success alert-icon-left mb-2" role="alert">
                    <span class="alert-icon"><i class="la la-pencil-square"></i></span>
                    <strong>Experience it!</strong>
                    <p>Check horizontal layout navigation without navigation dropdown arrow example below. <a href="https://pixinvent.com/modern-admin-clean-bootstrap-4-dashboard-html-template/html/ltr/horizontal-menu-template/horizontal-nav-no-dropdown.html" target="_blank" class="white">horizontal-nav-no-dropdown.html</a></p>
                </div>
            </div>
        </div>
    </div>
</div>
<!--/ Description -->
<!-- Example -->
<div id="examples" class="card">
    <div class="card-header">
        <h4 class="card-title">Examples</h4>
        <a class="heading-elements-toggle"><i class="la la-ellipsis-v font-medium-3"></i></a>
        <div class="heading-elements">
            <ul class="list-inline mb-0">
                <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                <li><a data-action="close"><i class="ft-x"></i></a></li>
            </ul>
        </div>
    </div>
    <div class="card-content">
        <div class="card-body">
            <div class="card-text">
                <p>Horizontal navigation without dropdown arrow</p>
                <div class="header-navbar navbar-expand-sm menu-icon-right navbar navbar-horizontal navbar-dark navbar-shadow border-grey border-darken-2 navbar-without-dd-arrow">
                    <!-- Horizontal menu content-->
                    <div data-menu="menu-container" class="header-navbar navbar-expand-sm navbar-container ml-0">
                        <ul id="main-menu-navigation1" data-menu="menu-navigation" class="nav navbar-nav">
                            <li class="nav-item"><a href="index.html" class="nav-link"><i class="la la-cloud"></i><span>Dashboard</span></a></li>
                            <li data-menu="megamenu" class="dropdown mega-dropdown nav-item"><a href="#" data-toggle="dropdown" class="dropdown-toggle nav-link"><i class="la la-sun-o"></i><span>Mega Menu</span></a>
                                <ul class="dropdown-menu row">
                                    <li data-mega-col="col-md-3" class="col-md-3">
                                        <ul class="drilldown-menu">
                                            <li class="menu-list">
                                                <ul class="mega-menu-sub">
                                                    <li><a href="#" class="dropdown-item"><i class="la la-circle"></i>First Link col-1</a>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-circle"></i>Second Link col-1 link</a>
                                                        <ul class="mega-menu-sub">
                                                            <li><a href="#" class="dropdown-item"><i class="la la-circle"></i>submenu level 2</a>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-circle"></i>submenu level 2</a>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-circle"></i>submenu level 2 link</a>
                                                                <ul class="mega-menu-sub">
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-circle"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-circle"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-circle"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-circle"></i>submenu level 3</a>
                                                                    </li>
                                                                </ul>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-circle"></i>submenu level 2</a>
                                                            </li>
                                                        </ul>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-circle"></i>Third Link col-1</a>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-circle"></i>Fourth Link col-1</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li data-mega-col="col-md-3" class="col-md-3">
                                        <h6 data-toggle="dropdown" class="dropdown-menu-header text-uppercase"><i class="la la-cog"></i>Column 2 title</h6>
                                        <ul class="drilldown-menu">
                                            <li class="menu-list">
                                                <ul class="mega-menu-sub">
                                                    <li><a href="#" class="dropdown-item"><i class="la la-circle"></i>First Link col-2</a>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-circle"></i>Second Link col-2</a>
                                                        <ul class="mega-menu-sub">
                                                            <li><a href="#" class="dropdown-item"><i class="la la-circle"></i>submenu level 2</a>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-circle"></i>submenu level 2</a>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-circle"></i>submenu level 2 link</a>
                                                                <ul class="mega-menu-sub">
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-circle"></i>submenu level 3</a>
                                                                        <ul class="mega-menu-sub">
                                                                            <li><a href="#" class="dropdown-item"><i class="la la-circle"></i>submenu level 2</a>
                                                                            </li>
                                                                            <li><a href="#" class="dropdown-item"><i class="la la-circle"></i>submenu level 2</a>
                                                                            </li>
                                                                        </ul>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-circle"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-circle"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-circle"></i>submenu level 3</a>
                                                                    </li>
                                                                </ul>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-circle"></i>submenu level 2</a>
                                                            </li>
                                                        </ul>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-circle"></i>Third Link col-2</a>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-circle"></i>Fourth Link col-2</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li data-mega-col="col-md-3" class="col-md-3">
                                        <h6 data-toggle="dropdown" class="dropdown-menu-header text-uppercase"><i class="la la-cog"></i>Column 3 title</h6>
                                        <ul class="drilldown-menu">
                                            <li class="menu-list">
                                                <ul class="mega-menu-sub">
                                                    <li><a href="#" class="dropdown-item"><i class="la la-circle"></i>First Link col-3</a>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-circle"></i>Second Link col-3</a>
                                                        <ul class="mega-menu-sub">
                                                            <li><a href="#" class="dropdown-item"><i class="la la-circle"></i>submenu level 2</a>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-circle"></i>submenu level 2</a>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-circle"></i>submenu level 2 link</a>
                                                                <ul class="mega-menu-sub">
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-circle"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-circle"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-circle"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-circle"></i>submenu level 3</a>
                                                                    </li>
                                                                </ul>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-circle"></i>submenu level 2</a>
                                                            </li>
                                                        </ul>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-circle"></i>Third Link col-3</a>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-circle"></i>Fourth Link col-3</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li data-mega-col="col-md-3" class="col-md-3">
                                        <h6 data-toggle="dropdown" class="dropdown-menu-header text-uppercase"><i class="la la-cog"></i>Column 4 title</h6>
                                        <ul class="drilldown-menu">
                                            <li class="menu-list">
                                                <ul class="mega-menu-sub">
                                                    <li><a href="#" class="dropdown-item"><i class="la la-circle"></i>First Link col-4</a>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-circle"></i>Second Link col-4</a>
                                                        <ul class="mega-menu-sub">
                                                            <li><a href="#" class="dropdown-item"><i class="la la-circle"></i>submenu level 2</a>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-circle"></i>submenu level 2</a>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-circle"></i>submenu level 2 link</a>
                                                                <ul class="mega-menu-sub">
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-circle"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-circle"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-circle"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-circle"></i>submenu level 3</a>
                                                                    </li>
                                                                </ul>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-circle"></i>submenu level 2</a>
                                                            </li>
                                                        </ul>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-circle"></i>Third Link col-4</a>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-circle"></i>Fourth Link col-4</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                            <li data-menu="dropdown" class="dropdown nav-item"><a href="#" data-toggle="dropdown" class="dropdown-toggle nav-link"><i class="ft-mic"></i><span>My Menu</span></a>
                                <ul class="dropdown-menu">
                                    <li class=" navigation-header"><span>Main</span></li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu="dropdown-submenu" class="dropdown dropdown-submenu"><a href="#" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Second level with child</a>
                                        <ul class="dropdown-menu">
                                            <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Third level</a>
                                            </li>
                                            <li data-menu="dropdown-submenu" class="dropdown dropdown-submenu"><a href="#" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Third level with child</a>
                                                <ul class="dropdown-menu">
                                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Fourth level</a>
                                                    </li>
                                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Fourth level</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                </ul>
                            </li>
                            <li data-menu="dropdown" class="dropdown nav-item"><a href="#" data-toggle="dropdown" class="dropdown-toggle nav-link"><i class="la la-heart-o"></i><span>Menu levels</span></a>
                                <ul class="dropdown-menu">
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu="dropdown-submenu" class="dropdown dropdown-submenu"><a href="#" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Second level with child</a>
                                        <ul class="dropdown-menu">
                                            <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Third level</a>
                                            </li>
                                            <li data-menu="dropdown-submenu" class="dropdown dropdown-submenu"><a href="#" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Third level with child</a>
                                                <ul class="dropdown-menu">
                                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Fourth level</a>
                                                    </li>
                                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Fourth level</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                </ul>
                            </li>
                            <li data-menu="megamenu" class="dropdown mega-dropdown nav-item"><a href="#" data-toggle="dropdown" class="dropdown-toggle nav-link"><i class="la la-random"></i><span>Mega Menu</span></a>
                                <ul class="dropdown-menu row">
                                    <li data-mega-col="col-md-4" class="col-md-4">
                                        <h6 data-toggle="dropdown" class="dropdown-menu-header text-uppercase"><i class="la la-cog"></i>Column 2 title</h6>
                                        <ul class="drilldown-menu">
                                            <li class="menu-list">
                                                <ul class="mega-menu-sub">
                                                    <li><a href="#" class="dropdown-item"><i class="la la-circle"></i>First Link col-2</a>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-circle"></i>Second Link col-2</a>
                                                        <ul class="mega-menu-sub">
                                                            <li><a href="#" class="dropdown-item"><i class="la la-circle"></i>submenu level 2</a>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-circle"></i>submenu level 2</a>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-circle"></i>submenu level 2 link</a>
                                                                <ul class="mega-menu-sub">
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-circle"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-circle"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-circle"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-circle"></i>submenu level 3</a>
                                                                    </li>
                                                                </ul>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-circle"></i>submenu level 2</a>
                                                            </li>
                                                        </ul>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-circle"></i>Third Link col-2</a>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-circle"></i>Fourth Link col-2</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li data-mega-col="col-md-4" class="col-md-4">
                                        <h6 data-toggle="dropdown" class="dropdown-menu-header text-uppercase"><i class="la la-cog"></i>Column 3 title</h6>
                                        <ul class="drilldown-menu">
                                            <li class="menu-list">
                                                <ul class="mega-menu-sub">
                                                    <li><a href="#" class="dropdown-item"><i class="la la-circle"></i>First Link col-3</a>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-circle"></i>Second Link col-3</a>
                                                        <ul class="mega-menu-sub">
                                                            <li><a href="#" class="dropdown-item"><i class="la la-circle"></i>submenu level 2</a>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-circle"></i>submenu level 2</a>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-circle"></i>submenu level 2 link</a>
                                                                <ul class="mega-menu-sub">
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-circle"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-circle"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-circle"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-circle"></i>submenu level 3</a>
                                                                    </li>
                                                                </ul>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-circle"></i>submenu level 2</a>
                                                            </li>
                                                        </ul>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-circle"></i>Third Link col-3</a>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-circle"></i>Fourth Link col-3</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li data-mega-col="col-md-4" class="col-md-4">
                                        <h6 data-toggle="dropdown" class="dropdown-menu-header text-uppercase"><i class="la la-cog"></i>Column 4 title</h6>
                                        <ul class="drilldown-menu">
                                            <li class="menu-list">
                                                <ul class="mega-menu-sub">
                                                    <li><a href="#" class="dropdown-item"><i class="la la-circle"></i>First Link col-4</a>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-circle"></i>Second Link col-4</a>
                                                        <ul class="mega-menu-sub">
                                                            <li><a href="#" class="dropdown-item"><i class="la la-circle"></i>submenu level 2</a>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-circle"></i>submenu level 2</a>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-circle"></i>submenu level 2 link</a>
                                                                <ul class="mega-menu-sub">
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-circle"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-circle"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-circle"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-circle"></i>submenu level 3</a>
                                                                    </li>
                                                                </ul>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-circle"></i>submenu level 2</a>
                                                            </li>
                                                        </ul>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-circle"></i>Third Link col-4</a>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-circle"></i>Fourth Link col-4</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                            <li data-menu="dropdown" class="dropdown nav-item"><a href="#" data-toggle="dropdown" class="dropdown-toggle nav-link"><i class="la la-flag-o"></i><span>Menu levels</span></a>
                                <ul class="dropdown-menu">
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu="dropdown-submenu" class="dropdown dropdown-submenu"><a href="#" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Second level with child</a>
                                        <ul class="dropdown-menu">
                                            <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Third level</a>
                                            </li>
                                            <li data-menu="dropdown-submenu" class="dropdown dropdown-submenu"><a href="#" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Third level with child</a>
                                                <ul class="dropdown-menu">
                                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Fourth level</a>
                                                    </li>
                                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Fourth level</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                </ul>
                            </li>
                            <li data-menu="dropdown" class="dropdown nav-item"><a href="#" data-toggle="dropdown" class="dropdown-toggle nav-link"><i class="ft-grid"></i><span>Menu levels</span></a>
                                <ul class="dropdown-menu">
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu="dropdown-submenu" class="dropdown dropdown-submenu"><a href="#" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Second level with child</a>
                                        <ul class="dropdown-menu">
                                            <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Third level</a>
                                            </li>
                                            <li data-menu="dropdown-submenu" class="dropdown dropdown-submenu"><a href="#" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Third level with child</a>
                                                <ul class="dropdown-menu">
                                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Fourth level</a>
                                                    </li>
                                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Fourth level</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                    <!-- /horizontal menu content-->
                </div>
            </div>
        </div>
    </div>
</div>
<!--/ Example -->
<!-- CSS Classes -->
<div id="css-classes" class="card">
    <div class="card-header">
        <h4 class="card-title">CSS Classes</h4>
        <a class="heading-elements-toggle"><i class="la la-ellipsis-v font-medium-3"></i></a>
        <div class="heading-elements">
            <ul class="list-inline mb-0">
                <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                <li><a data-action="close"><i class="ft-x"></i></a></li>
            </ul>
        </div>
    </div>
    <div class="card-content">
        <div class="card-body">
            <div class="card-text">
                <p>This table contains class which can be used in horizontal navigation to hide dropdown arrow. </p>
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>Classes</th>
                                <th>Description</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <th scope="row"><code>.navbar-without-dd-arrow</code></th>
                                <td>To set horizontal navigation without dropdown arrow, you need to add <code>.navbar-without-dd-arrow</code> class in horizontal navigation <code>&lt;div&gt;</code> tag. Refer HTML markup line no 13.</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<!--/ CSS Classes -->
<!-- HTML Markup -->
<div class="card">
    <div class="card-header">
        <h4 class="card-title">HTML Markup</h4>
        <a class="heading-elements-toggle"><i class="la la-ellipsis-v font-medium-3"></i></a>
        <div class="heading-elements">
            <ul class="list-inline mb-0">
                <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                <li><a data-action="close"><i class="ft-x"></i></a></li>
            </ul>
        </div>
    </div>
    <div class="card-content">
        <div class="card-body">
            <div class="card-text">
                <p>This section contains HTML Markup to create light vertical navigation. This markup define where to add css classes to make vertical navigation light.</p>
                <ul>
                    <li><span class="text-bold-600">Line no 13:</span> Contain the <code>.navbar-without-dd-arrow</code> class to hide navigation dropdown arrow.</li>
                </ul>
                <pre data-line="13" class="language-markup">
          <code class="language-markup">
            &lt;!DOCTYPE html&gt;
            &lt;html lang="en"&gt;
            &lt;head&gt;&lt;/head&gt;
            &lt;body data-open="click" data-menu="vertical-menu" class="vertical-layout vertical-menu 2-column menu-expanded"&gt;

            &lt;!-- fixed-top--&gt;
            &lt;nav role="navigation" class="header-navbar navbar-expand-sm navbar navbar-with-menu fixed-top navbar-dark navbar-shadow navbar-border"&gt;
            ...
            &lt;/nav&gt;

            &lt;!-- START  Horizontal navigation --&gt;
            &lt;div role="navigation" data-menu="menu-wrapper" class="header-navbar navbar-expand-sm navbar navbar-horizontal navbar-light navbar-without-dd-arrow"&gt;
            ...
            &lt;/div&gt;
            &lt;!-- END Horizontal navigation--&gt;

            &lt;!-- BEGIN Content--&gt;
            &lt;div class="content app-content"&gt;
            &lt;div class="content-wrapper"&gt;
            &lt;!-- content header--&gt;
            &lt;div class="content-header row"&gt;
            ...
            &lt;/div&gt;
            &lt;!-- content header--&gt;

            &lt;!-- content body--&gt;
            &lt;div class="content-body"&gt;
            ...
            &lt;/div&gt;
            &lt;!-- content body--&gt;

            &lt;/div&gt;
            &lt;/div&gt;
            &lt;!-- END Content--&gt;

            &lt;!-- START FOOTER DARK--&gt;
            &lt;footer class="footer footer-dark"&gt;
            ...
            &lt;/footer&gt;
            &lt;!-- START FOOTER DARK--&gt;

            &lt;/body&gt;
            &lt;/html&gt;
          </code>
        </pre>
            </div>
        </div>
    </div>
</div>
<!--/ HTML Markup -->
<!-- PUG Code -->
<div class="card">
    <div class="card-header">
        <h4 class="card-title">PUG Configuration</h4>
        <a class="heading-elements-toggle"><i class="la la-ellipsis-v font-medium-3"></i></a>
        <div class="heading-elements">
            <ul class="list-inline mb-0">
                <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                <li><a data-action="close"><i class="ft-x"></i></a></li>
            </ul>
        </div>
    </div>
    <div class="card-content">
        <div class="card-body">
            <div class="card-text">
                <p>Modern Admin use PUG as template engine to generate pages and whole template quickly using node js, for getting start with PUG usage & template generating process please refer template documentation.</p>
                <h5 class="card-title mt-2">PUG Variables</h5>
                <p>This table contains required PUG variables to generate horizontal navigation without dropdown arrow.</p>
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>Block</th>
                                <th>Variable</th>
                                <th>Datatype</th>
                                <th>Value</th>
                                <th>Description</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <th scope="row"><code>horizontalMenuConfig</code></th>
                                <td><code>menuWithoutDDArrow</code></td>
                                <td><code>boolean</code></td>
                                <td><code>true</code></td>
                                <td><code>horizontalMenuConfig</code> block has a <code>menuWithoutDDArrow</code> variable, it contains horizontal navigation dropdown icon specific settings in that you need to set <code>true</code>.</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="alert bg-info alert-icon-left mb-2" role="alert">
                    <span class="alert-icon"><i class="la la-info"></i></span>
                    Modern Admin Template <a href="https://pixinvent.com/modern-admin-clean-bootstrap-4-dashboard-html-template/documentation" target="_blank" class="white"><u>documentation</u></a> has full list of all blocks, datatype, variables and their description table. Please review it for more configuration options.
                </div>
                <h5 class="card-title mt-2">PUG Code</h5>
                <p>Use following PUG code to generate page or template having vertical light navigation.</p>
                <ul>
                    <li><span class="text-bold-600">Line no 20-21:</span> Set horizontal navigation menu icon right setings to <code>menuWithoutDDArrow</code> variable value as <code>true</code> in <code>horizontalMenuConfig</code> block, it contains horizontal navigation dropdown icon specific classes.</li>
                    <li><span class="text-bold-600">Line no 27-28:</span> <code>content</code> block has content section html file included <code>include ../contents/horizontal-no-arrow-navigation.html</code>, which can be customizable on page level.</li>
                </ul>
                <p>If you want to use this options on page level you need to define this configuration option on PUG page it self. This template has one example pug file for <code>horizontal-navigation-submenu-click.pug</code>, however you can use it on template level but it will generate template all pages with the same configuration option.</p>
                <pre data-line="20-21, 27-28" data-line-offset="11" class="language-pug">
          <code class="language-pug">
            block pageVars
                - var pageTitle    = "No Dropdown Arrow"
                - var pageSubTitle = "Horizontal navigation without dropdown arrow"
                - var description  = "The horizontal navigation without dropdown arrow customization option."
                - var activeMenu   = "horizontal-nav-no-dropdown"

            extends template

            append horizontalMenuConfig
                - var menuWithoutDDArrow = true

            append breadcrumbs
                +breadcrumbs([{url:"index.html",name:"Home"},{url:"#",name:"Horizontal Navigation"}, {name:"Navigation Dark"}])

            //- Include page content in page block
            append content
                include ../contents/horizontal-nav-no-dropdown.html

            //- Vendor CSS
            //------------------------------
            //- Add Vendor specific CSS
            append vendorcss
                link(rel='stylesheet', type='text/css', href='../../../app-assets/vendors/css/ui/prism.min.css')

            //- Page CSS
            //------------------------------
            //- Add custom page specific CSS
            append pagecss

            //- Vendor JS
            //------------------------------
            //- Add vendor specific JS
            append vendorjs
                script(type='text/javascript' ,src='../../../app-assets/vendors/js/ui/prism.min.js')

            //- Page JS
            //------------------------------
            //- Add custom page specific JS
            append pagejs
          </code>
        </pre>
            </div>
        </div>
    </div>
</div>
<!--/ PUG Code -->
